PC World Komputer 2010 April/PCWorld0410.iso/pluginy Firefox/13316/13316.xpi/content/gridViewDrawing.js

JavaScript | 2009-07-27 | 13.6 KB | 445 lines

/* Copyright (C) 2009 Norman Solomon
 * e-mail: [e-mail]
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the License.
 */

// ********************************************************************
// *****                                                          *****
// *****    GRID-VIEW IMAGE DISPLAY AND MOUSE-CLICK PROCESSING    *****
// *****    --------------------------------------------------    *****
// *****      Displaying GridView ".jpeg" images on gCanvas       *****
// *****    and handling user mouse-clicks on GridView gCanvas    *****
// *****                                                          *****
// ********************************************************************

// ==================================================================
// Draws the gNodeList[] images stored in all HistoryNode objects
// ==================================================================
function drawAllImagesOnCanvas(numAcross, scrollToTop)
{
    // Init integer vars
    var availWidth, imgWidth, imgHeight;
    var numVisible, reqRows, reqHgt;
    var imgX, imgY;
    var ndx = -1;
    var drawDelay;

    // Init other vars
    var tabID;             // FF Tab tabID
    var showOpenPage;     // Boolean
    var tabRoot, tNode;     // TreeNode's
    var hNode;             // HistoryNode
    var optGrpView;         // <radiogroup...>
    var noImgsMsg;         // String

    // ----------------------------------------------------
    // Stop GV display setInterval() if its already running
    if (gGVdispInterval !== null)
    {
        clearInterval(gGVdispInterval);
        gGVdispInterval = null;
    }

    // Show message and exit if no GridView images to show
    numVisible = numVisibleTreeNodes();
    if (numVisible === 0)
    {
        // Message to show depends on quick-view option
        optGrpView = document.getElementById("optGrpView");
        if (optGrpView.selectedIndex === 3
         && numExtWinOpenTabs() === gTabRoots.length)
            noImgsMsg = "No Tabs have been closed";
        else
            noImgsMsg = "History tree is fully contracted (no images to show)";

        // Show big white message, then exit
        showBigMessageOnEmptyCanvas(noImgsMsg, "bold 14pt verdana");
        return;
    }

    // ----------------------------------------------------
    // Set width and height for all drawn GridView images
    gCanvas.width = CANVAS_MIN_WID;      // Always for GridView
    availWidth = gCanvas.width - (GV_HGAP * (numAcross + 1));
    imgWidth = Math.round(availWidth / numAcross);
    imgHeight = Math.round(imgWidth * WH_RATIO);

    // Set gCanvas.height required to draw all GridView images
    reqRows = Math.ceil(numVisible / numAcross);
    reqHgt = reqRows * (imgHeight + GV_VGAP) + 30;
    if (reqHgt < CANVAS_MIN_HGT)
        gCanvas.height = CANVAS_MIN_HGT;
    else
        gCanvas.height = reqHgt;

    // Scroll to top of gCanvas if param passed
    if (scrollToTop)
        gCanvasScroller.scrollTo(0, 0);

    // Clear the canvas before drawing images
    gCtx.fillStyle = CANVAS_BAK_COL;  // Dark grey
    gCtx.fillRect(0, 0, gCanvas.width, gCanvas.height);

    // -----------------------------------------------------------
    // Init global array that stores GV display TreeNodes
    gGVdispArray = new Array();

    // Draw web-page images for all TreeNode's visible in TreeView
    for (var i = 0; i < gTabRoots.length; i++)
    {
        // Only draw images for Tabs that are visible in TreeView
        tabRoot = gTabRoots[i];
        if (!tabRoot.hidden)
        {
            // Draw HistoryNode web-page images in the order they were added to
            // gNodeList[] for this tabID - open pages first, then closed pages
            tabID = tabRoot.histNode.tab;
            for (var tf = 0; tf < 2; tf++)
            {
                // Set flag used in for(j) loop, below
                if (tf === 0)
                    showOpenPage = true;
                else
                    showOpenPage = false;

                // Two passes down gNodeList[] are made for each tabID
                for (var j = 0; j < gNodeList.length; j++)
                {
                    // Only draw images for visible TreeNodes in this tab
                    hNode = gNodeList[j];
                    tNode = gTreeNodes[hNode.treeNodeNdx + 1]; // + 1 for added Root
                    if (hNode.tab === tabID && !tNode.hidden
                     && tNode.isOpenPage === showOpenPage)
                    {
                        // Set (imgX, imgY) used to draw image on gCanvas
                        ndx ++;
                        if (ndx === 0)
                        {
                            // First image is always drawn at top-left corner
                            imgX = GV_HGAP;
                            imgY = GV_HGAP;
                        }
                        else
                        {
                            // Move down gCanvas if have reached end of a row
                            if (Math.floor(ndx / numAcross) - (ndx / numAcross) === 0)
                            {
                                imgX = GV_HGAP;
                                imgY += imgHeight + GV_VGAP;
                            }
                            else
                            {
                                // Still on same row - So just move across gCanvas
                                imgX += imgWidth + GV_HGAP;
                            }
                        }

                        // Set props used to draw image and detect mouse-clicks on it
                        tNode.gridViewImgX = imgX - 1;
                        tNode.gridViewImgY = imgY - 1;
                        tNode.gridViewImgWid = imgWidth + 2;
                        tNode.gridViewTabNum = i;

                        // Add TreeNode ref to end of global array
                        gGVdispArray.push(tNode);
                    }
                }
            }
        }
    }

    // ---------------------------------------------------
    // Start setInterval() that draws GV images
    drawDelay = Math.round(imgWidth / 30);
    gGVdispInterval = setInterval(drawGridView, drawDelay);
}

// ====================================================
// Draws GridView using setInterval() and global array
// ====================================================
function drawGridView()
{
    // Draw image and desc then remove from global array
    if (gGVdispArray.length > 0)
    {
        // Get TreeNode reference
        tNode = gGVdispArray[0];

        // Draw the GridView image and description
        drawGridViewImage(tNode, true);
        drawGridViewDescription(tNode, true);

        // Remove TreeNode reference from array
        gGVdispArray.splice(0,1);
    }
    else
    {
        // Stop setInterval() and set global flag
        clearInterval(gGVdispInterval);
        gGVdispInterval = null;
    }
}

// ===========================================================
// Draws GridView ".jpeg" image on gCanvas using passed tNode
// ===========================================================
function drawGridViewImage(tNode, showHighlight)
{
    // Init vars used to draw image
    var x, y, w, h;      // Integers
    var hNode;          // HistoryNode
    var bordCol;      // Color
    var roundRect;      // Boolean

    // ---------------------------------------------------
    // Get image co-ordinates from tNode
    x = tNode.gridViewImgX + 1;
    y = tNode.gridViewImgY + 1;
    w = tNode.gridViewImgWid - 2;
    h = Math.round(w * WH_RATIO);

    // Get ref to corresponding gNodeList[] HistoryNode
    hNode = tNode.histNode;

    // Set ".jpeg" image border shape and colour
    if (hNode === gParamArray[1]
    || (showHighlight && isHighlightedNode(tNode)))
    {
        // Current FF page or node found via Find Next/Prev
        bordCol = "red";
        roundRect = true;
    }
    else if (tNode.parent === null || !tNode.isOpenPage)
    {
        // "Dummy" root or node representing closed FF page
        bordCol = "rgb(0,55,219)";    // Blue
        roundRect = false;
    }
    else
    {
        // Open FF page (not root and not current FF page)
        bordCol = "black";
        roundRect = false;
    }

    // Clear any previous border highlight
    gCtx.lineWidth = 3;
    gCtx.strokeStyle = CANVAS_BAK_COL;
    gCtx.strokeRect(x - 3, y - 3, w + 6, h + 6);

    // Draw hNode ".jpeg" image or a white bordered rectangle
    if (!blankRectangleDrawn
        (hNode, x, y, w, h, roundRect, bordCol))
    {
        // Page HAS appeared in an FF Tab - So draw ".jpeg" image
        if (!hNode.imgCreated)
        {
            // Slow draw - once only
            drawAndUpdateNodeImage(hNode, x, y, w, h);
        }
        else
        {
            // Fast draw - all further draws
            gCtx.drawImage(hNode.imgToDraw, x, y, w, h);
        }

        // Draw overlapping border that contains the image
        if (roundRect)
        {
            // Rounded corner rect with highlighted border
            gCtx.lineWidth = 3;
            drawRoundedRect
                (x - 2, y - 2, w + 4, h + 4, 10, bordCol, false);
        }
        else
        {
            // Square rect with black border
            gCtx.lineWidth = 2;
            gCtx.strokeStyle = bordCol;
            gCtx.strokeRect(x - 1, y - 1, w + 2, h + 2);
        }
    }
}

// ============================================================
// Draws GV web-page desc and info for passed tNode on gCanvas
// Drawn text will be highlighted or cleared of highlighting
// ============================================================
function drawGridViewDescription(tNode, showHighlight)
{
    // Init integers
    var x, y, w, h, tabNum;
    var descWid, timeWid, infoWid;
    var rectX, textX;

    // Init other vars
    var truncDesc, timeInfo, pageInfo;    // Strings
    var hNode;                            // HistoryNode
    var tabRoot;                        // TreeNode

    // ------------------------------------------------
    // Get drawn image co-ordinates from passed tNode
    x = tNode.gridViewImgX;
    y = tNode.gridViewImgY;
    w = tNode.gridViewImgWid;
    h = Math.round(w * WH_RATIO);

    // Get ref to corresponding gNodeList[] HistoryNode
    hNode = tNode.histNode;

    // Get Tab number for tNode - As shown in <listbox...>
    tabNum = tNode.gridViewTabNum;

    // ---------------------------------------------
    // Get width of truncated web-page description
    gCtx.mozTextStyle = "bold 8pt verdana";
    truncDesc = truncatedText(hNode.desc, w - 9);
    descWid = gCtx.mozMeasureText(truncDesc);

    // Get widths of timeInfo and page-info strings
    gCtx.mozTextStyle = "7pt verdana";
    timeInfo = hNode.timeInfo;
    timeWid = gCtx.mozMeasureText(timeInfo);

    if (hNode === gParamArray[1])
        pageInfo = "  CURRENT";
    else if (tNode.isOpenPage)
        pageInfo = "  Open";
    else
        pageInfo = "  Closed";

    pageInfo += " (Tab " + (tabNum + 1).toString() + ")";
    infoWid = timeWid + gCtx.mozMeasureText(pageInfo);

    // ----------------------------------------------------------
    // Draw two lines of highlighted/cleared text below GV image
    if (showHighlight && isHighlightedNode(tNode))
    {
        // Draw light-green background highlighting rectangle
        gCtx.fillStyle = "rgb(184,225,174)";
        if (descWid > infoWid)
        {
            rectX = Math.round((x + (w - descWid) / 2) - 5);
            gCtx.fillRect(rectX, (y + h + 4), descWid + 10, 34);
        }
        else
        {
            rectX = Math.round((x + (w - infoWid) / 2) - 5);
            gCtx.fillRect(rectX, (y + h + 4), infoWid + 10, 34);
        }

        // Draw red page description
        textX = Math.round(x + (w - descWid) / 2);
        gCtx.fillStyle = "rgb(160,0,0)";
        gCtx.mozTextStyle = "bold 8pt verdana";
        fillText(truncDesc, textX, (y + h + 17));

        // Draw time page loaded below web-page description
        textX = Math.round(x + (w - infoWid) / 2);
        gCtx.fillStyle = "rgb(0,0,128)";  // Dark blue
        gCtx.mozTextStyle = "7pt verdana";
        fillText(timeInfo, textX, (y + h + 32));

        // Draw page-info to right of time string
        gCtx.fillStyle = "black";
        fillText(pageInfo, textX + timeWid, (y + h + 32));
    }
    else
    {
        // Draw gCanvas background colour clearing rectangle
        gCtx.fillStyle = CANVAS_BAK_COL;
        if (descWid > infoWid)
        {
            rectX = Math.round((x + (w - descWid) / 2) - 6);
            gCtx.fillRect(rectX, (y + h + 4), descWid + 12, 34);
        }
        else
        {
            rectX = Math.round((x + (w - infoWid) / 2) - 6);
            gCtx.fillRect(rectX, (y + h + 4), infoWid + 12, 34);
        }

        // Set page description text color
        if (hNode === gParamArray[1])
            gCtx.fillStyle = "white";
        else if (!tNode.isOpenPage)
            gCtx.fillStyle = "rgb(180,190,255)";  // Blue
        else if (hNode.tab === gCurrentTabID)
            gCtx.fillStyle = "rgb(255,172,117)";  // Orange
        else
            gCtx.fillStyle = "rgb(255,255,128)";  // Yellow

        // Draw page description
        textX = Math.round(x + (w - descWid) / 2);
        gCtx.mozTextStyle = "bold 8pt verdana";
        fillText(truncDesc, textX, (y + h + 17));

        // Draw time page loaded below page description
        textX = Math.round(x + (w - infoWid) / 2);
        gCtx.mozTextStyle = "7pt verdana";
        gCtx.fillStyle = "rgb(204,255,212)";    // Light green
        fillText(timeInfo, textX, (y + h + 32));

        // Draw page-info to right of time string
        gCtx.fillStyle = "white";
        fillText(pageInfo, textX + timeWid, (y + h + 32));
    }
}

// =======================================================
// Returns number of TreeNode objects currently visible
// =======================================================
function numVisibleTreeNodes()
{
    var tNode;
    var numVisible = 0;

    // Count visible TreeNodes (not counting root)
    for (var i = 1; i < gTreeNodes.length; i++)
    {
        // Get the TreeNode
        tNode = gTreeNodes[i];
        if (!tNode.hidden)
            numVisible++;
    }
    return numVisible;
}

// ==============================================================
// Called from GridView <html:canvas ...> mouse onclick event
// Returns gTreeNodes[] TreeNode user clicked on, or null if none
// ==============================================================
function gridViewTreeNodeFromMouseXY(x, y)
{
    // Return GridView ".jpeg" the user clicked on (if any)
    var tNode;
    for (var i = 1; i < gTreeNodes.length; i++)
    {
        // Only draw images for nodes that are visible in TreeView
        tNode = gTreeNodes[i];
        if (!tNode.hidden)
        {
            // Check if user clicked anywhere on GridView ".jpeg"
            if (x > tNode.gridViewImgX
             && x < tNode.gridViewImgX + tNode.gridViewImgWid
             && y > tNode.gridViewImgY
             && y < tNode.gridViewImgY + (tNode.gridViewImgWid * WH_RATIO))
            {
                // Return TreeNode that user clicked on
                return tNode;
            }
        }
    }

    // The user did NOT click on ANY GridView ".jpeg"
    return null;
}